import 'react-big-calendar/lib/css/react-big-calendar.css'
import React  from 'react'
import {makeStyles} from '@material-ui/core/styles';
import api from "./api";
import dayjs from "dayjs";
import Button from "@material-ui/core/Button";
import {Calendar, dayjsLocalizer,Views} from "react-big-calendar";
import Dialog from "@material-ui/core/Dialog";
import DialogContent from "@material-ui/core/DialogContent";
import TextField from "@material-ui/core/TextField";
import DialogActions from "@material-ui/core/DialogActions";
import {getStartOfMonth,getEndOfMonth,dateShortForm} from './utils/dateUtils'
//头部引入
import moment from 'moment';




const useStyles = makeStyles((theme) => ({
    root: {
        color: "red",
    },
    app: {
        width: '90vw',
        height: '90vh'
    },
    top:{
        paddingBottom: '10PX'
    },
    dialogPaper:{
        minHeight: '50vh',
        minWidth: '25vw'
    }
}));
export default function App() {
    const classes = useStyles();
    const [myEventsList,setMyEventsList] = React.useState([])
    const [open,setOpen] = React.useState(false)
    const localizer=dayjsLocalizer(dayjs)
    const [formData,setFormData]=React.useState({id:"",title:"123",start:"2017-05-24T10:30",end:"2017-05-24T10:30"});
    //定义日期格式
    const formatYearRule = 'YYYY-MM-DD hh:mm:ss'; // 格式化年月日 YYYY-MM-DD hh:mm:ss


    React.useEffect(()=>{
        let start=dateShortForm(getStartOfMonth());
        let end=dateShortForm(getEndOfMonth());
        init(start,end);
    },[])

    function init(start,end){
        api.myEvent.get({start:start,end:end}).then(
            resp =>{
                const list=resp.entity;
                list.forEach((item)=>{item.start=dayjs(item.start).toDate();item.end=dayjs(item.end).toDate();})
                setMyEventsList(list)}
        ).catch(
            err => {
                console.log(err)
            }
        )
    }

    function handleClickOpen(){
        setOpen(true)
    }
    function handleClose(){
        setOpen(false)
    }
    function handleSelect (slotInfo) {
        setFormData({...formData,id:slotInfo.id,title:slotInfo.title,start:dayjs(slotInfo.start).format('YYYY-MM-DDThh:mm'),end:dayjs(slotInfo.end).format('YYYY-MM-DDThh:mm')})
        setOpen(true)
    }
    function handleRangeChange(slotInfo,type,c) {
        let start="";
        let end="";
        switch (type) {
            case "month":
                start=dayjs(slotInfo.start).format('YYYY-MM-DD')
                end=dayjs(slotInfo.end).format('YYYY-MM-DD')
                break;
            case "week":
                start=dayjs(slotInfo[0]).format('YYYY-MM-DD')
                end=dayjs(slotInfo[6]).format('YYYY-MM-DD')
                break;
            case "day":
                start=dayjs(slotInfo[0]).format('YYYY-MM-DD')
                end=dayjs(slotInfo[0]).format('YYYY-MM-DD')
                break;
            case "agenda":
                start=dayjs(slotInfo).format('YYYY-MM-DD')
                end=dayjs(slotInfo).format('YYYY-MM-DD')
                break;
            default:
                return;
        }
        init(start,end)
    }
    function handleSelectEvent(a){
        // setOpen(true)
        console.log(a)
    }
    function handleNavigate(slotInfo) {
        let date = dayjs(slotInfo).format("YYYY-MM-DD");
        init(date,date)
    }
    function changeFormData(e) {
        console.log(e.target)
        setFormData({...formData,[e.target.name]:e.target.value})
        console.log(formData)
    }
    function save() {
        if(formData.id === ""){
            api.myEvent.post(formData).then(resp=>{
                console.log(resp)
            }).catch(err=>{
                console.log(err)
            });
        }else {
            api.myEvent.put(formData).then(resp=>{
                console.log(resp)
            }).catch(err=>{
                console.log(err)
            });
        }
    }
    function del() {
        api.myEvent.del({id:formData.id}).then(resp=>{
            console.log(resp)
        }).catch(err=>{
            console.log(err)
        })
    }
    return (
        <div className={classes.app}>
            <div className={classes.top}>
                <Button variant="contained" color="primary" onClick={handleClickOpen}>
                    添加
                </Button>
            </div>
            <Calendar
                localizer={localizer}
                events={myEventsList}
                defaultView="month"
                onSelectEvent={handleSelect}
                onNavigate={handleNavigate}
                onRangeChange={handleRangeChange}
            />
            <div>
                <Dialog
                    classes={{ paper: classes.dialogPaper }}
                    open={open}
                    onClose={handleClose}>
                    <DialogContent>
                        <div>
                            <TextField
                                id="standard-full-width"
                                name="title"
                                label="标题"
                                placeholder="Placeholder"
                                value={formData.title}
                                margin="normal"
                                onChange={changeFormData}
                            />
                        </div>
                        <div>
                            <TextField
                                id="datetime-local"
                                name="start"
                                value={formData.start}
                                fullWidth
                                label="开始时间"
                                type="datetime-local"
                                onChange={changeFormData}
                                InputLabelProps={{
                                    shrink: true,
                                }}/>
                        </div>
                        <div>
                            <TextField
                                id="datetime-local"
                                fullWidth
                                name="end"
                                value={formData.end}
                                label="结束时间"
                                type="datetime-local"
                                onChange={changeFormData}
                                InputLabelProps={{
                                    shrink: true,
                                }}/>
                        </div>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={save} color="primary">
                            SAVE
                        </Button>
                        <Button onClick={del} color="primary">
                            DELETE
                        </Button>
                        <Button onClick={handleClose} color="primary">
                            CANCEL
                        </Button>
                    </DialogActions>
                </Dialog>
            </div>
        </div>
    );
}
